<template>
    <div>
			<div class="video-box">
				<video  style="width: 100%;" :style="{height:height+'px'}"
				:src= webUrl+videoInfo.video_path
				controls=false
				autoplay=true 
				loop=true 
				:objectFit=videoMode
				></video>
				<view class="cover-view-top-left">
					<view class="top-text-left " style="margin-right: 20upx;z-index: 9999;" >
						<view style="padding-left: 20upx;padding-top: 20upx;" >
							<button class="cu-btn cuIcon" @click="back">
								<text class="iconfont icon-fanhui" style="font-size: 80upx;"></text>
							</button>
						</view>
					</view>
				</view>
				<view class="cover-view-top-center">
					<view class="top-text-center iconfont icon-tuijian1 text-grey">
						
					</view>
					<view class="top-text-center" style="font-size: 30upx;line-height: 70upx;">
						推荐
					</view>
				</view>
				<cover-view class="cover-view-left">
					<cover-view class="left-view">
						<cover-view class="left-text" style="font-size: 45upx;">@{{videoInfo.nickname}}</cover-view>
					</cover-view>
					<cover-view class="left-view">
						<cover-view class="left-text" style="font-size: 33upx;">简介:{{videoInfo.audio_desc}}</cover-view>
					</cover-view>
					<cover-view class="left-view">
						<cover-view class="left-text" style="font-size: 33upx;">BGM:{{videoInfo.uthor}}=>{{videoInfo.name}}</cover-view>
					</cover-view>
				</cover-view>
				
				<view class="cover-view-right">
					<cover-image :src=webUrl+videoInfo.u_face_image_path class="avater img" @click="tapAvater"></cover-image>
					<cover-view class="right-text-avater">+</cover-view>
					<cover-view class="right-text"></cover-view>
					
					<view @tap="like" class="img iconfont  " :class="islike? 'icon-dianzan':'icon-duomeitiicon- text-white'" style="font-size: 80upx;text-align: center;margin-bottom: 10upx;">
						
					</view>
					 
					<cover-view class="right-text">{{videoInfo.stars_counts}}</cover-view>
					<view class="img iconfont icon-fenxiang text-white" style="font-size: 80upx;text-align: center;margin-bottom: 10upx;">
						
					</view>
					<cover-view class="right-text">分享</cover-view>
				</view>
				
				
				
		</div>
    </div>
</template>
<script>
	import {
		mapState
	}from 'vuex'
    export default { 
		computed: mapState(['hasLogin','webUrl','userInfo']),
		data() {
		    return {
				height:0,
				videoInfo:'',
				videoMode:'',
				islike:false
			}
		},
		onLoad(e) {
			var user = this.userInfo
			//加载视频
			uni.request({
				url:this.webUrl+'queryVideoByVideoId?id='+e.video_id,
				success: (res) => {
					this.videoInfo = res.data.data
					if(this.videoInfo.uthor == null){
						this.videoInfo.uthor = this.videoInfo.nickname
					}
					if(this.videoInfo.video_height > this.videoInfo.video_width){
						this.videoMode = "cover"
					}else{
						this.videoMode = "contain"
					}
					
				}
			})
			//判断是否点赞了该视频
			if(user.id != undefined && this.hasLogin == true){
				console.log("登陆了")
				uni.request({
					url:this.webUrl+'isLikeVideo',
					method:'POST',
					header:{
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					data:{
						userId:user.id,
						videoId:e.video_id
					},
					success: (res) => {
						var flag = res.data.data
						this.islike = flag
					}
				})
			}else{
				console.log("用户未登录")
			}
			
			//加载进历史记录中
			if(user.id != undefined && this.hasLogin == true){
				console.log("登陆了")
				uni.request({
					url:this.webUrl+'addVideoRecord?userId='+user.id+'&videoId='+e.video_id,
					success: (res) => {
						console.log(res)
					}
				})
			}else{
				console.log("addVideoRecord:用户未登录")
			}
			
		},
		created(){
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight
					this.height = this.height
				}
			})
		},
        methods: {
			tapAvater(){
				uni.navigateTo({
					url:"../userInfo/userInfo?user_id="+this.videoInfo.user_id
				})
			},
			back(){
				uni.navigateBack({})
			},
			like(){
				var flag = this.islike;
				
				if(flag == true){
					uni.request({
						url:this.webUrl+'unlikeVideo',
						data:{
							'userId':this.userInfo.id,
							'videoId':this.videoInfo.id
						},
						success: (res) => {
							console.log()
							if(res.data.status == 1){
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}else{
								this.islike = false
								this.videoInfo.stars_counts = this.videoInfo.stars_counts -1
							}
						}
					})
				}else{
					uni.request({
						url:this.webUrl+'likeVideo',
						data:{
							'userId':this.userInfo.id,
							'videoId':this.videoInfo.id
						},
						success: (res) => {
							console.log()
							if(res.data.status == 1){
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}else{
								this.islike = true
								this.videoInfo.stars_counts = this.videoInfo.stars_counts +1
							}
						}
					})
				}
			}
        },
    }
</script>
<style scoped>
	.video-box{
		width: 100%;
		height: 100%;
		
	}
	.cover-view-bottom{
		display: flex;
		position: absolute;
		justify-content: center;
		height: 70upx;
		width: 100%;
		bottom: 2upx;
		z-index: 9999;
		color: #FFFFFF;
		//#ifndef APP-PLUS-NVUE
		white-space: pre-wrap;  
		text-overflow:ellipsis;
		overflow:hidden;
		//#endif
	}
	.bottom-text{
		text-align: 30upx;
		font-size: 40upx;
		color: #FFFFFF;
	}
	.cover-view-top-center{
		display: flex;
		position: absolute;
		justify-content: center;
		height: 100upx;
		width: 100%;
		top: 30upx;
		z-index: 9998;
		color: #FFFFFF;
		//#ifndef APP-PLUS-NVUE
		white-space: pre-wrap;  
		text-overflow:ellipsis;
		overflow:hidden;
		//#endif
	}
	.top-text-center{
		font-size: 60upx;
		color: #FFFFFF;
	}
	.cover-view-top-left {
		display: flex;
		position: absolute;
		height: 100upx;
		width: 100%;
		top: 30upx;
		z-index: 9999;
		color: #FFFFFF;
		//#ifndef APP-PLUS-NVUE
		white-space: pre-wrap;  
		text-overflow:ellipsis;
		overflow:hidden;
		//#endif
	}
	.top-text-left{
		font-size: 50upx;
		color: #FFFFFF;
	}
	.cover-view-left{
		position: absolute;
		margin-left: 10upx;
		width: 500upx;
		bottom: 120upx;
		z-index: 9999;
		font-size: 16px;
		color: #FFFFFF;
		//#ifndef APP-PLUS-NVUE
		white-space: pre-wrap;  
		text-overflow:ellipsis;
		overflow:hidden;
		//#endif
	}
	.left-view{
		margin-bottom: 20upx;
	}
	.left-text{
		font-size: 40upx;
		color: #FFFFFF;
	}
	.avater{
		border-radius: 50upx;
		border-color: #fff;
		border-style: solid;
		border-width: 2px;
	}
	
	.cover-view-right{
		position: absolute;
		bottom: 160upx;
		right: 20upx;
		//#ifndef APP-PLUS-NVUE
		display: flex;
		flex-direction: column;
		//#endif
		z-index: 9999;
	}
	
	.right-text-avater{
		position: absolute;
		font-size: 14px;
		top: 80upx;
		left: 30upx;
		height: 40upx;
		width: 40upx;
		background-color: #DD524D;
		color: #FFFFFF;
		border-radius: 50%;
		text-align: center;
		line-height: 40upx;
		z-index: 999;
	}
	.avater-icon{
		height: 40upx;
		width: 40upx;
		
		color: #fff;
		background-color: #DD524D;
		border-radius: 50%;
		position: absolute;
		left: 30upx;
		top:-20upx;
	}
	
	.right-text{
		text-align: center;
		font-size: 14px;
		color: #FFFFFF;
		height: 20px;
	}
	.img{
		
		height: 100upx;
		width: 100upx;
		opacity: 0.9;
	}
	
	
</style>